<template>
	<view class="carPrice">
		<view class="title">
			<text>{{ title }}</text>
			<text>换一换</text>
			<text class="spot"></text>
		</view>
		<view class="content">
			<view class="carItem" v-for="item in carList" :key="item.id">
				<view class="carInfo">
					<image :src="item.img" mode=""></image>
					<text>{{ item.name }}</text>
					<text>{{ item.name }}</text>
					<text>{{ item.price }}万</text>
				</view>
				<view class="priveBtn"><text>获取低价</text></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			default: ''
		},
		carList: {
			type: Array,
			default: []
		}
	}
}
</script>

<style lang="less" scoped>
.carPrice {
	box-sizing: border-box;
	margin-top: 50upx;
	padding: 0 20upx;
	.title {
		position: relative;
		display: flex;
		justify-content: space-between;
		padding: 0 20upx;

		.spot {
			position: absolute;
			left: 10;
			top: 0;
			width: 8px;
			height: 26px;
			border-radius: 24upx;
			background-color: rgb(16, 92, 240);
		}
		text:nth-child(1) {
			padding-left: 40upx;
			font-size: 36upx;
			font-weight: 600;
		}
		text:nth-child(2) {
			font-size: 28upx;
			color: rgb(16, 92, 240);
		}
	}

	.content {
		display: flex;
		justify-content: space-around;
		margin: 20upx 10upx 0 10upx;
		padding: 0 10upx;
		padding-bottom: 30upx;
		border-bottom: 1px solid #e3e3e3;
		.carItem {
			display: flex;
			flex-direction: column;
			align-items: center;
			.carInfo {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 210upx;
					height: 210upx;
					border-radius: 10upx;
				}
				text {
					margin-top: 10upx;
				}
				text:nth-child(2) {
					width: 100px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					color: rgb(37, 38, 42);
					font-size: 38upx;
				}
				text:nth-child(3) {
					width: 100px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					color: #303133;
					font-size: 28upx;
				}
				text:nth-child(4) {
					color: rgb(243, 121, 33);
					font-size: 28upx;
					font-weight: 700;
					font-size: 36upx;
				}
			}
			.priveBtn {
				margin-top: 20upx;
				padding: 15upx 35upx;
				background-color: rgb(252, 223, 51);
				border-radius: 30upx;
				font-size: 28upx;
			}
		}
	}
}
</style>
